<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body class="container-fluid">
		<div id="app">
			<p>
				<button type="button" class="btn btn-success" v-on:click="countAdd()">count：{{count}}</button>
			</p>
			<p>
				<button type="button" class="btn btn-danger" v-on:click="greet()">弹出</button>
			</p>
			
			<p>
				<button type="button" class="btn btn-info" v-on="{mouseenter: over, mouseleave: out}">button</button>
			</p>
			
			<!--键值修饰符-->
			<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
			<input v-on:keyup.13="submit()"><br>
			<!--与上等价-->
			<input @keyup.enter="submit">  
			<!--
				可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
				可以使用 v-on:keyup.f1
				Vue.config.keyCodes.f1 = 112
			-->
			
			<!--事件修饰符-->
			<!-- 阻止单击事件冒泡 -->
			<a v-on:click.stop="doThis"></a>
			
			<!-- 提交事件不再重载页面 -->
			<form v-on:submit.prevent="onSubmit"></form>
			
			<!-- 串联的修饰符 -->
			<a v-on:click.stop.prevent="doThat"></a>
			
			<!-- 只使用修饰符 -->
			<form v-on:submit.prevent></form>
			
			<!-- 添加事件侦听器时使用事件捕获模式 -->
			<div v-on:click.capture="doThis"></div>
			
			<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
			<div v-on:click.self="doThat"></div>
			
			<!-- 点击事件将只会触发一次 -->
			<a v-on:click.once="doThis"></a>
			
		</div>


		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					count: 0	
				},
				methods: {
					countAdd: function(){
						return this.count++;
					},
					greet: function(event){
						var event = event || window.event;
						alert(event.target.tagName);
					},
					submit: function(){
						alert("commit");
					},
					over: function(){
						console.log('over');
					},
					out: function(){
						console.log('out');
					}
				}
			});
			
			
			
		</script>
	</body>
</html>
